<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from 'com/HelloWorld.vue'
import SlotAttrs from './components/SlotAttrs.vue'
import { useGender } from './pinia-store'


const arrList: number[] = reactive([1, 2, 3])


const gender = useGender()



// const getInfo = function (val: string) {
//   console.log(val)
// }

const child = ref<{ info: string } | null>(null)

onMounted(() => {
  // console.log(child.value?.info)
  // child.value.info = 'hello, i am app!'
})

const changeCurrent = () => {
  gender.current++
}

const changeName = () => {
  gender.asyncChangeName()
}

</script>

<template>
  <!-- <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div> -->
  <!-- <HelloWorld msg="Vite + Vue" :arr="arrList" @parentClick="getInfo" /> -->
  <!-- <SlotAttrs :a="1" :b="2" msg="hello" :arr="[1, 2, 3]" ref="child">
    <template #header>
      <p>I am Header</p>
    </template>
  </SlotAttrs> -->
  <!-- <p>pinia : {{ gender.current }}</p>
  <p>pinia : {{ gender.name }}</p>
  <p>pinia : {{ gender.currentName }}</p>
  <el-button @click="changeCurrent">改变值</el-button><br><br>
  <el-button @click="changeName">改变姓名</el-button> -->

  <router-view></router-view>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
